<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Using custom HTML</title>
</head>
<body>
<link rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.2.0/styles/default.min.css">
<script src="https://unpkg.com/@highlightjs/cdn-assets@11.2.0/highlight.min.js"></script>
<pre>
    <code id="example1" class="grammar-js">
let a = 123;
console.log(a);
function abc(){}
class bb{
  constructor(){}
  do(){}
}
for(let i=0;i<3;++i){
  console.log(i)
}
console.log(a)
const a = require('hightlight.js')
    </code>
</pre>

<script>
  // configure: (options: Partial<HLJSOptions>) => void
  /*
    export interface HLJSOptions {
      noHighlightRe: RegExp
      languageDetectRe: RegExp
      classPrefix: string
      cssSelector: string
      languages?: string[]
      __emitter: EmitterConstructor
      ignoreUnescapedHTML?: boolean
    }
  */
  hljs.configure({
    // classPrefix: 'sy-', //见 highlight/05.API/04.configure/readme-assets/00.png

    // languageDetectRe: /\bgrammar-([\w-]+)\b/i, //默认为 language-xx
    //↓ 的优先级没有 ↑ 的高
    noHighlightRe: /grammar-js/
  })
  /*
    classPrefix: a string prefix added before class names in the generated markup, used for backwards compatibility with stylesheets.
    在生成的标记中，在类名之前添加的字符串前缀，用于向后兼容样式表。

    languages: an array of language names and aliases restricting auto detection to only these languages.
    一组语言名称和别名，将自动检测限制为仅对这些语言进行。

    languageDetectRe: a regex to configure how CSS class names map to language (allows class names like say color-as-php vs the default of language-php, etc.)

    noHighlightRe: a regex to configure which CSS classes are to be skipped completely.
    一个正则表达式来配置哪些CSS类将被完全跳过。

    cssSelector: a CSS selector to configure which elements are affected by hljs.highlightAll. Defaults to 'pre code'.
    一个CSS选择器，用于配置哪些元素受hljs.highlightAll的影响。默认为'pre code'。
  */

  hljs.highlightAll()

</script>
</body>
</html>
